<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :append-to-body="appendToBody"
    v-loading="loading"
    @close="clear">
    <el-form :model="customerForm" ref="CustomerFormDate" :rules="cutomerRules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" label-width="120px" prop="realName">
            <el-input v-model="customerForm.realName" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" label-width="120px" prop="phone">
            <el-input v-model="customerForm.phone" :disabled="true"/>
          </el-form-item>
        </el-col>
      </el-row>

      <span style="color: #ff0002">！如需修改基本信息，请联系工作人员进行修改</span>

      <el-row>
        <el-col :span="12">
          <el-form-item label="修改密码" label-width="120px" prop="password">
            <el-input v-model="password"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="确认密码" label-width="120px">
            <el-input v-model="confirmPassword"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin: -40px 0">
      <el-button @click="clear">取消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "CustomerInfo",
  data() {
    return {
      dialogFormVisible: false,
      appendToBody: true,
      loading: false,
      title: '',
      customerForm: {},
      cutomerRules: {},
      confirmPassword: '',
      password: ''
    }
  },
  methods: {
    edit(user) {
      this.dialogFormVisible = true
      this.customerForm = user
    },
    submit() {
      this.$confirm("确认修改密码吗？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning"
      }).then(() => {
        this.$axios.post("/customer/changePass", {
          password: this.password,
          username: this.customerForm.phone
        }).then(resp => {
          if (resp.data.code === 200) {
            this.loading = true
            this.$message({
              message: resp.data.result,
              type: "success",
              duration: 5000
            })
            // 延迟函数，消息展示5s后调用注销方法
            setTimeout(() => {
              this.loading = false
              this.$emit('reload')
            }, 5000)
          }
        })
      })
    },
    clear() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>

</style>
